<template>
  <div class="list" v-if="data">
    <!-- 广告 -->
    <Advertisement :width="'100%'" />
    <!-- 路径 -->
    <PositionBar :crumbs="data.crumbs" />
    <!-- 面板 -->
    <SearchCard :data="data" />

    <div class="list-content" v-if="data.pageInfoVos">
      <div class="list-left">
        <el-card
          class="box-card"
          shadow="hover"
          :body-style="{ padding: '0px' }"
        >
          <template #header>
            <div class="rjfl">
              <span class="rjfl-title">软件列表</span>
            </div>
          </template>
          <div
            class="list-left-card-it"
            v-for="it in data.pageInfoVos"
            :key="it.id"
            @click="gotoDetail(it, $router, axios)"
          >
            <div class="list-left-card-it-img">
              <img :src="it.icon" />
            </div>
            <div class="list-left-card-it-info">
              <div class="list-left-card">
                <div>
                  <span class="title">{{ it.name }}</span>
                </div>
                <div style="width: 600px" class="one-line">
                  <span class="desc" style="width: 120px">{{ it.brief }}</span>
                </div>
                <div class="marks">
                  <span>更新时间：{{ it.createTime }}</span>
                  <span>大小：{{ it.size }}</span>
                  <span>好评率：
                    <el-rate style="display: inline;vertical-align: text-bottom;" v-model="it.recommendIndex" disabled text-color="#ff9900"></el-rate>
                  </span>
                </div>
              </div>
            </div>
            <div class="list-left-card-it-download">
              <button
                class="button is-outlined is-rounded is-theme-button"
                style="width: 130px"
                @click.stop="downloadUrl(it.highSpeedUrlOne,it.id)"
              >
                下载
              </button>
              <span class="maxjb" style="display: none"
                >最高可得 <span class="jb">{{ 288 }}</span> 金币</span
              >
            </div>
          </div>

          <!-- 分页 -->
          <el-pagination
            class="m-bt-15 p-lr-20 pager"
            background
            hide-on-single-page
            v-model:page-size="pageSize"
            v-model:current-page="curPage"
            layout="prev, pager, next, -> ,total, jumper"
            @current-change="changeCurrent"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </div>

      <div class="list-right">
        <SameList :data="data.rankSoftVos" />

        <BannerRight class="m-t-15" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Advertisement from "@/components/Advertisement.vue";
import PositionBar from "@/components/PositionBar.vue";
import SearchCard from "@/components/SearchCard.vue";
import PageAble from "@/components/PageAble.vue";
import SameList from "@/components/SameList.vue";
import BannerRight from "@/components/BannerRight.vue";
import { ref, computed, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { gotoList } from "@/utils/action";

const params = ref(useRoute().params);
const paramsList = params.value.param.split("_");

const data = ref(null);
const total = ref(15);
const curPage = ref(1);
const pageNum = ref(1);
const pageSize = ref(15);

const router = useRouter();
const changeCurrent = (nowPage) => {
  paramsList[4] = nowPage;
  gotoList(paramsList.join("_"), router,false);
};

onBeforeMount(() => {
  axios
    .get(`/api/download/soft/page/${params.value.param}.html`)
    .then((res) => {
      data.value = res.data.data;
      total.value = res.data.data.total;
      curPage.value = res.data.data.curPage;
      pageNum.value = res.data.data.pageNum;
      pageSize.value = res.data.data.pageSize;
    });
});

// console.log(paramsList);
// 387_secondId_thirdId_labelId_pageNum
// const secondId = computed(() => paramsList[1]);
// const thirdId = computed(() => paramsList[2]);
// const labelId = computed(() => paramsList[3]);
// const pageNum = computed(() => paramsList[4]);
</script>

<style lang="less" scoped>
.pager {
  /deep/.active {
    background: @theme-color !important;
  }
}
.list-content .list-left {
  background-color: unset;
}
.list-left-card-it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 121px;
  border-bottom: 1px solid #eee;

  &-img {
    display: contents;
    img {
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }
  }
  &-info {
    width: 780px;
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #1d2127;
      line-height: 20px;
    }
    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #545759;
      line-height: 14px;
    }
    .marks {
      display: flex;
      margin-top: 10px;
      span {
        font-size: 14px;
        font-weight: 400;
        color: #93999e;
        line-height: 18px;
        margin-right: 10px;
      }
    }
  }

  &-download {
    display: flex;
    flex-direction: column;
    // margin-right: 20px;
    .maxjb {
      opacity: 0;
      margin-top: 10px;
      width: 120px;
      font-size: 9px;
      font-weight: 400;
      color: #93999e;
      line-height: 10px;
      display: flex;
      justify-content: center;
    }
    .jb {
      font-size: 9px;
      font-weight: bold;
      color: #000;
      line-height: 10px;
    }
  }

  &:hover {
    background: @theme-back-color;
    .maxjb {
      opacity: 1 !important;
    }
  }
}

.list {
  min-height: 500px;
  padding: 10px 0;
  min-width: 1200px;

  &-content {
    width: 100%;
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 20px;
      font-weight: 600;
      color: #1d2127;
      line-height: 20px;
    }
  }

  &-right {
    width: 25%;
  }
  &-left {
    width: 74%;
    background: #fff;

    &-card-it {
      cursor: pointer;
      padding: 0 20px;
    }

    &-card-it-info {
      margin-left: 20px;
    }
  }
}
</style>
